<template>
	<view class="scan-result">
		<view>
			<messageBox :message="messageStr" :isSuccess="isSuccess" :num="invoiceNum"> </messageBox>

		</view>
		<view class="content-box">
			<view class="content">
				<view class="title pore">
					<view class="page-box flex-a-center flex-j-center">
						<text class="current-page">{{currentPage}}</text>/<text
							class="total">{{invoiceNum.total}}</text>
					</view>
					<view class="invoice-img">
						占位符
					</view>
					<view class="result-messsage flex-a-center" :class="{'result-messsage-success':isResSuccess}">
						当前发票识别成功，已录入票夹
					</view>
					<view class="prev-page poab flex-j-center flex-a-center">
						<text class="iconfont">&#xe63c;</text>
					</view>
					<view class="next-page poab flex-j-center flex-a-center">
						<text class="iconfont">&#xe63c;</text>
					</view>
				</view>
				<view class="invoice-box">
					<view class="g-content">
						<view class="g-filter"></view>
					</view>
					<view class="flex-a-center flex-j-between invoice-one">
						<view class="txt">
							发票代码
						</view>
						<view class="val">
							{{invoice.code||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							发票号码
						</view>
						<view class="val">
							{{invoice.number||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							开票日期
						</view>
						<view class="val">
							{{invoice.date||'--'}}
						</view>
					</view>

					<view class="flex-a-center flex-j-between">
						<view class="txt">
							销方名称
						</view>
						<view class="val">
							{{invoice.checkCode||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							销方税号
						</view>
						<view class="val">
							{{invoice.checkCode||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							购方名称
						</view>
						<view class="val">
							{{invoice.checkCode||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							购方税号
						</view>
						<view class="val">
							{{invoice.checkCode||'--'}}
						</view>
					</view>

					<view class="line-box flex-a-center">

						<view class="line">

						</view>

					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							合计金额（不含税）
						</view>
						<view class="val">
							{{invoice.money||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							总税额
						</view>
						<view class="val">
							{{invoice.money||'--'}}
						</view>
					</view>
					<view class="flex-a-center flex-j-between">
						<view class="txt">
							价税合计
						</view>
						<view class="val">
							{{invoice.money||'--'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="save flex-a-center flex-j-center" :class="{'save-valid':saveValid}" @click="save">
			<view class="btn-one" v-show="false">
				继续识别
			</view>
			<view class="del">
				删除
			</view>
			<view class="continue">
				继续识别
			</view>

		</view>
	</view>
</template>

<script setup>
	import messageBox from '@/components/scanResult/message.vue'
	import {
		ref,
		watch
	} from 'vue'
	const messageStr = ref('票夹中已存在该发票，本次识别结果不录入票夹')
	const currentPage = ref(1)

	const isSuccess = ref(2)
	const invoiceNum = ref({
		total: 50,
		success: 26,
		error: 24
	})
	const title = ref('增值税电子普通发票')
	const invoice = ref({
		code: '012000210120011',
		number: '11307270',
		date: '2023年08月09日',
		checkCode: '9382',
		// money: '2,333.30'
	})
</script>

<style lang="scss">
	.scan-result {
		height: 100%;

		.content-box {
			overflow: auto;
			height: calc(100% - 232rpx);
			padding: 0 24rpx;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 48rpx;
			margin-top: 24rpx;

			.content {
				width: 100%;

				box-sizing: border-box;

				.title {
					height: 440rpx;
					box-shadow: 0 0 16rpx 0 #34394314;
					border-radius: 20rpx;

					.page-box {
						height: 76rpx;
						color: #666666;
						font-size: 28rpx;
						text-align: center;

						.current-page {
							color: #333333;
							font-size: 32rpx;
							font-weight: 500;
						}

						.total {
							color: #666666;
							font-size: 28rpx;
							font-weight: 400;
						}


					}

					.prev-page,
					.next-page {
						top: 50%;
						width: 36rpx;
						height: 36rpx;
						background: #FFFFFF;
						box-shadow: 0 4rpx 16rpx 0 #3439433d;
						border-radius: 18rpx;

						.iconfont {
							color: #296DFA;
							font-size: 30rpx;
						}
					}

					.next-page {
						right: -12rpx;
					}

					.prev-page {
						left: -12rpx;
						transform: rotate(180deg);
					}

					.invoice-img {
						height: calc(100% - 130rpx);
					}

					.result-messsage {
						height: 44rpx;
						font-weight: 400;
						font-size: 28rpx;
						padding: 0 24rpx;
						color: #F5222D;
					}

					.result-messsage-success {
						color: #4DB315;
					}

				}

				.invoice-box {
					padding: 0 24rpx;
					box-shadow: 0 0 16rpx 0 #34394314;
					margin-top: 24rpx;
					padding-bottom: 30rpx;
					font-weight: 400;
					font-size: 28rpx;




					>view:not(.line-box) {
						height: 60rpx;
					}

					.line-box {
						height: 40rpx;
						background:
							radial-gradient(circle at left, transparent, #eee 18rpx, #fff 18rpx) left,
							radial-gradient(circle at right, transparent, #eee 18rpx, #fff 18rpx) right;
						background-repeat: no-repeat;
						background-size: 50% 100%;
						width: calc(100% + 48rpx);
						margin-left: -24rpx;
						padding: 0 24rpx;
						box-sizing: border-box;
					}

					.line {
						width: 100%;
						border-bottom: 2rpx dashed #EAEAEE;

					}

					.txt {

						color: #666666;
					}

					.val {

						color: #333333;
					}
				}


			}

		}

		.save {
			height: 144rpx;
			background: #FFFFFF;
			box-shadow: 0 2rpx 20rpx 0 #d1d1d145;

			.btn-one {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #296DFA;
				border-radius: 40rpx;
				width: 100%;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.continue,
			.del {
				width: 328rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-weight: 400;
				font-size: 32rpx;
				text-align: center;
			}

			.continue {
				background: #296DFA;
				color: #FFFFFF;
			}

			.del {
				color: #296DFA;
				margin-right: 46rpx;
				border: 2rpx solid #D9D9D9;
			}

		}
	}
</style>